<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import {
  select_shop_header_api,
  select_shop_items_api,
} from "@/package/mall/api/guider_home";
import { Router } from "@/utils/router";

import PageSticky from "@/components/page/sticky.vue";
import ListTypeItem from "./components/list-type-item.vue";
import ListGoodsItem from "./components/list-goods-item.vue";
import ListMore from "@/components/list/more.vue";

onLoad(() => {
  select_shop_header_api().then((resp) => {
    typeList.value = resp.product_type;
  });
  reloadList();
});
onPageScroll(() => (listLoadMore.value = listData.value.length > 1));
onReachBottom(() => loadMoreList());

const queryData = reactive({ type_id: 0 });

const typeList = ref<any[]>([]);
const typeClick = (id: number) => {
  queryData.type_id = id;
  reloadList();
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 20 }, (query) => {
    return select_shop_items_api({ ...query, ...toRaw(queryData) });
  });

const goodsClick = (index: number) => {
  const goods = listData.value[index];
  Router.navigateTo(`/package/mall/pages/goods/detail?id=${goods.id}`);
};
</script>

<template>
  <PageSticky>
    <scroll-view class="list-type" scroll-x enhanced :show-scrollbar="false">
      <view class="list-type-space"></view>
      <view
        class="list-type-item"
        v-for="i of typeList"
        :key="i.id"
        @click="typeClick(i.id)"
      >
        <ListTypeItem :isActive="queryData.type_id === i.id" :text="i.name" />
      </view>
    </scroll-view>
  </PageSticky>

  <view class="list-data">
    <view class="list-data-wrapper">
      <view
        class="list-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="goodsClick(d)"
      >
        <ListGoodsItem :info="i" />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>
</template>

<style lang="scss">
.list-type {
  height: 88rpx;
  white-space: nowrap;

  .list-type-space,
  .list-type-item {
    display: inline-block;
    vertical-align: top;
  }

  .list-type-space {
    width: 30rpx;
  }

  .list-type-item {
    padding: 0 10rpx;
    margin-top: 16rpx;
    margin-right: 40rpx;
  }
}

.list-data {
  .list-data-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-top: 30rpx;
  }

  .list-data-item {
    position: relative;
    width: 336rpx;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
  }
}
</style>